<template>
  <view class="page">
    <c-svga
      v-if="windowWidth && windowHeight && src"
      :width="windowWidth"
      :height="windowHeight"
      ref="cSvgaRef"
      :canvasId="canvasId"
      :src="src"
      :loops="1"
      :auto-play="true"
      @frame="onFrame"
      @finished="onFinished"
      @percentage="onPercentage"
      @loaded="onLoaded"
    ></c-svga>
    <view class="content">
      <view>切换图像</view>
      <view class="btnBox">
        <button @click="src = '/static/svga/mynvwang.svga'" size="mini">mynvwang</button>
        <button @click="src = '/static/svga/kafei.svga'" size="mini">玫瑰花</button>
      </view>
      <view>播放暂停</view>
      <view class="btnBox">
        <button @click="$refs.cSvgaRef.call('startAnimation')" size="mini">播放</button>
        <button @click="$refs.cSvgaRef.call('startAnimation', true)" size="mini">
          反向播放
        </button>
        <button @click="$refs.cSvgaRef.call('pauseAnimation')" size="mini">
          暂停播放
        </button>
        <button @click="$refs.cSvgaRef.call('stopAnimation')" size="mini">
          停止播放
        </button>
      </view>
      <view>设置动画的拉伸模式</view>
      <view class="btnBox">
        <button @click="$refs.cSvgaRef.call('setContentMode', 'Fill')" size="mini">
          Fill
        </button>
        <button @click="$refs.cSvgaRef.call('setContentMode', 'AspectFill')" size="mini">
          AspectFill
        </button>
        <button @click="$refs.cSvgaRef.call('setContentMode', 'AspectFit')" size="mini">
          AspectFit
        </button>
      </view>
      <view>强制清空画布</view>
      <view class="btnBox">
        <button @click="$refs.cSvgaRef.call('clear')" size="mini">清空画布</button>
      </view>
      <view>跳到指定帧/百分比</view>
      <view class="btnBox">
        <button @click="$refs.cSvgaRef.call('stepToFrame', [40, true])" size="mini">
          跳到40帧
        </button>
        <button @click="$refs.cSvgaRef.call('stepToPercentage', [60, true])" size="mini">
          跳到60%
        </button>
      </view>
      <view>设定动态图像/动态文本</view>
      <view class="btnBox">
        <button
          @click="$refs.cSvgaRef.call('setImage', ['/static/index/logo.png', '06'])"
          size="mini"
        >
          动态图像
        </button>
        <button
          @click="$refs.cSvgaRef.call('setText', [{ text: 'Hello, World!' }, '08'])"
          size="mini"
        >
          动态文本
        </button>
        <button @click="$refs.cSvgaRef.call('clearDynamicObjects')" size="mini">
          清空动态图像和文本
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      canvasId: "myCanvas",
      // https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/f782c42a-bcee-4a50-ae1c-8b46337622bf.svg
      src: "",
      windowWidth: "",
      windowHeight: "",
    };
  },
  methods: {
    onFinished() {
      // this.$refs.cSvgaRef.call("clear");
      console.log("动画停止播放时回调");
    },
    onFrame(frame) {
      //动画播放至某帧后回调
      // console.log(frame);
    },
    onPercentage(percentage) {
      //动画播放至某进度后回调
      // console.log(percentage);
    },
    onLoaded() {
      console.log("加载完成");
      //设置动画拉伸模式
        this.$refs.cSvgaRef.call("setContentMode", "AspectFill");
    },
  },
  onLoad() {
    uni.getSystemInfo().then((res) => {
      console.log(res);
      this.windowWidth = res.windowWidth + "px";
      this.windowHeight = res.windowHeight + "px";
    });
  },
};
</script>

<style lang="scss">
.page {
  width: 100vw;
  overflow-x: hidden;
}
.content {
  padding: 20rpx;
  font-size: 28rpx;
}
.btnBox {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
}
</style>
